<template>
  <div class="app-container home">
    <el-row :gutter="40" class="title-row">
      <el-col :span="24">
        <div class="title-container">
          <h1 class="hotel-title">酒店管理系统</h1>
        </div>
        <el-carousel :interval="5000" type="card" height="400px">
          <el-carousel-item v-for="item in 3" :key="item">
            <img :src="require('@/assets/images/' + item + '.jpeg')" alt="轮播图" style="width: 100%; height: 100%; object-fit: cover;">
          </el-carousel-item>
        </el-carousel>
        <el-row type="flex" justify="space-around" class="button-row">
          <el-button type="primary" @click="goTarget('http://localhost/system/user')">前台管理</el-button>
          <el-button type="success" @click="goTarget('http://localhost/system/role')">客房管理</el-button>
          <el-button type="info" @click="goTarget('http://localhost/system/dept')">财务与报表管理</el-button>
          <el-button type="warning" @click="goTarget('http://localhost/system/post')">后台管理</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 移除多余的标签和未使用的列 -->
  </div>
</template>

<script>
export default {
  name: "Index",
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">


  .title-row {
    .title-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;

      .hotel-title {
        font-size: 24px;
        color: #333;
        margin: 0;
      }
    }

    .el-carousel {
      width: 100%;
    }

    .button-row {
      margin-top: 20px;

      .el-button {
        margin: 0 10px;
      }
    }
  }

  .el-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  // 其他未修改的样式可以保持不变或根据需要进行调整

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap');

  .app-container {
    font-family: 'Roboto Slab', sans-serif; // 使用新引入的字体
    color: #676a;
    overflow-x: hidden;
    background-size: cover; // 让背景图片覆盖整个容器
    background-position: center; // 背景图片居中

    // ... 其他样式保持不变
  }
  // 其他样式保持不变

  .title-row {
    .title-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;

      .hotel-title {
        font-size: 24px;
        color: #333;
        margin: 0;
        // 你可以在这里为标题单独指定一个字体变种或大小
        font-family: 'Roboto Slab', sans-serif; // 如果需要的话
        font-weight: 700; // 例如，使用粗体
      }
    }

    // 其他样式保持不变
  }

  // 其他样式保持不变
  ::v-deep(.app-container) {
    background-image: url('https://image.baidu.com/search/detail?ct=503316480&z=2&tn=baiduimagedetail&ipn=d&word=%E7%BD%91%E7%AB%99%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87&step_word=&lid=16387248615180536276&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=&copyright=&cs=1467169589,781471932&os=638503723,40349106&simid=1467169589,781471932&pn=39&rn=1&di=7400427937490534401&ln=1764&fr=&fmq=1725531011090_R&ic=&s=undefined&se=&sme=&tab=0&width=0&height=0&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fimg95.699pic.com%2Fxsj%2F0y%2Fuz%2F3f.jpg%2521%2Ffh%2F300&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDEsMiwxMyw3LDYsNSwxMiw5'); // 确保图片路径正确
    background-size: cover;
    background-position: center;}

</style>
